<template>
  <div>
    <van-nav-bar left-text="确认订单" left-arrow @click-left="onClickLeft" />
    <div @click="$router.push('/choseaddress')" class="topadress">
      <van-cell center title="收货人：哈哈哈" icon="location-o" label="收货地址：北京 北京市 朝阳区 呼家楼呼家楼呼家楼呼家楼呼家楼呼家楼呼家楼呼家楼呼家楼" is-link />
      <p>1234567</p>
    </div>
    <div>
      <div class="wraper" v-for="(item, index) in cartpro" :key="index">
        <van-cell>
          <template #title>
            <span class="custom-title">{{ item[0].shopstore }}</span>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <div>
          <van-card v-for="(item1, index1) in item" :key="index1" :num="item1.num" :tag="item1.categoryname"
            :price="item1.price" :title="item1.shop" :thumb="item1.picture">
            <template #footer>
            </template>
          </van-card>
          <van-cell title="优惠卷" is-link value="省78元:" />
          <van-cell title="发票" is-link value="普通" />
          <van-cell title="配送方式" is-link value="快递" />
          <van-cell-group>
            <van-field v-model="remarks" label="留言" placeholder="建议留言前先与商家沟通确认" />
          </van-cell-group>
          <div class="price">
            共计{{ item.length }}件商品 小计<span>￥{{ item.reduce((s, current) => {
                return s + (current.num * current.price)
              }, 0)
            }}</span>
            <van-submit-bar :price="totalprice * 100" button-text="提交订单" @submit="onSubmit" />
          </div>

        </div>
        <p>{{ totalprice }}</p>


      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartlist: [{
        id: 51,
        shop: "苏宁生鲜】 湾仔码头玉米蔬菜猪肉水饺720g 速冻饺子 方便速食",
        picture: "https://image2.suning.cn/uimg/b2c/newcatentries/0010128947-000000000602731511_1_800x800.jpg",
        product: "苏宁生鲜】 湾仔码头玉米蔬菜猪肉水饺720g 速冻饺子 方便速食",
        price: 28.67,
        oldprice: 78,
        putaway: 1,
        detail: null,
        categoryname: "甜点/面食",
        categoryId: 6,
        num: 1,
        shopstore: '哈哈家',
        state: false
      },
      {
        id: 50,
        shop: "【中华特色】连城馆天水间白鹜鸭连城白鸭蛋 土鸭蛋 连城特产新鲜鸭蛋30个礼盒装",
        picture: "https://image3.suning.cn/uimg/b2c/newcatentries/0070144986-000000000187331289_1_800x800.jpg",
        product: "苏宁生鲜】 湾仔码头玉米蔬菜猪肉水饺720g 速冻饺子 方便速食",
        price: 38.67,
        oldprice: 78,
        putaway: 1,
        detail: null,
        categoryname: "甜点/面食",
        categoryId: 6,
        num: 1,
        shopstore: '哈哈家',
        state: false
      }, {
        id: 52,
        shop: "苏宁生鲜】 湾仔码头玉米蔬菜猪肉水饺720g 速冻饺子 方便速食",
        picture: "https://image1.suning.cn/uimg/b2c/newcatentries/0010128947-000000000614428161_1_800x800.jpg",
        product: "苏宁生鲜】 湾仔码头玉米蔬菜猪肉水饺720g 速冻饺子 方便速食",
        price: 48.67,
        oldprice: 78,
        putaway: 1,
        detail: null,
        categoryname: "甜点/面食",
        categoryId: 6,
        num: 1,
        shopstore: '晁然家',
        state: false,


      },],
      cartpro: [],
      remarks: '',
    }
  },
  created() {
    let shopname = this.cartlist.map((item) => item.shopstore);
    let shopname2 = new Set(shopname);
    let arr = Array.from(shopname2);
    for (let i = 0; i < arr.length; i++) {
      let pro = this.cartlist.filter((item) => item.shopstore == arr[i]);
      this.cartpro.push(pro);
    }
  },
  computed: {
    totalprice() {
      return this.cartlist.reduce((s, current) => {
        return s + (current.num * current.price)
      }, 0)
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onSubmit() {
      this.$toast('订单提交成功')
      this.$router.push('/toship')
    }
  },
};
</script>

<style scoped>
.topadress {
  position: relative;
}

p {
  font-size: 14px;
  color: black;
  position: absolute;
  right: 35px;
  top: 0
}

.wraper {
  margin-top: 30px;
  border: 2px solid rgb(206, 200, 200);
  border-radius: 5px;
}

.price {
  height: 100px;
  text-align: right;
}

.price span {
  color: red;
}
</style>